---
import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = "关于我";

const identity = {
    firstName: "莎拉",
    country: "加拿大",
    occupation: "技术撰稿人",
    hobbies: ["摄影", "观鸟", "棒球"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "red";
const fontWeight = "bold";
const textCase = "uppercase";
---

<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style define:vars={{skillColor, fontWeight, textCase}}>
            h1 {
                color: purple;
                font-size: 4rem;
            }
            .skill {
                color: var(--skillColor);
                font-weight: var(--fontWeight);
                text-transform: var(--textCase);
            }
        </style>
    </head>
    <body>
        <Header />

        <h1>{pageTitle}</h1>
        <h2>……和我的新 Astro 网站！</h2>

        <p>以下是关于我的几个事实：</p>
        <ul>
            <li>我的名字是{identity.firstName}.</li>
            <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
            {
                identity.hobbies.length >= 2 && (
                    <li>
                        我的两个习惯：{identity.hobbies[0]}和
                        {identity.hobbies[1]}
                    </li>
                )
            }
        </ul>
        <p>我的技能是：</p>
        <ul>
            {skills.map((skill) => <li class="skill">{skill}</li>)}
        </ul>

        {happy && <p>我非常乐意学习 Astro！</p>}

        {finished && <p>我完成了这节教程！</p>}

        {
            goal === 3 ? (
                <p>我的目标是在三天内完成。</p>
            ) : (
                <p>我的目标不是 3 天。</p>
            )
        }
        <Footer />
        <script>
			import "../scripts/menu.js";
		</script>
    </body>
</html>
